<template>
  <div>
    <gc-spread-sheets :hostClass='hostClass'>
      <gc-worksheet :dataSource="dataTable" :autoGenerateColumns='autoGenerateColumns'>
        <!-- :formatter='formatter' -->
        <gc-column :width="width" v-for='(item,index) in columns' :key='index' :dataField="item.name" :visible='visible'
          :resizable='resizable'>
        </gc-column>
      </gc-worksheet>
    </gc-spread-sheets>
  </div>
</template>
<script>
  import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
  import '@grapecity/spread-sheets-vue'
  import formData from '@/mock/formData.json'
  export default {
    data() {
      return {
        hostClass: 'spread-host',
        autoGenerateColumns: true,
        width: 100,
        visible: true,
        resizable: true,
        formatter: "$ #.00",
        columns: [{
          display: "报表编号",
          name: "rptNum",
          width: "20%",
          align: "left"
        }, {
          display: "报表名称",
          name: "rptNm",
          width: "30%",
          align: "left"
        }, {
          display: "报表类型",
          name: "templateType",
          width: "15%",
          render: (data, row, context, it) => {
            if ("01" == context) {
              return "明细报表";
            } else if ("02" == context) {
              return "单元格报表";
            } else if ("03" == context) {
              return "综合报表"
            } else if ("04" == context) {
              return "指标列表（纵）";
            } else if ("05" == context) {
              return "指标列表（横）";
            } else if ("06" == context) {
              return "交叉列表";
            } else {
              return "未知";
            }
          }
        }, {
          display: "创建时间",
          name: "createTime",
          width: "30%",
          type: 'date',
          format: 'yyyy-MM-dd hh:mm:ss'
        }]
      }
    },
    computed: {
      dataTable() {
        let dataTable = formData.rows;
        // for (let i = 0; i < 42; i++) {
        //   dataTable.push({ price: i + 0.56 })
        // }
        return dataTable
      }
    }
  }
</script>
<style scoped>
  .spread-host {
    width: 500px;
    height: 600px;
  }
</style>